<template>
    <view
        :class="isIpx ? 'ipx_button' : ''"
        class="bot-btn"
        :style="{ background: bgColor, position: fixed ? 'fixed' : '' }"
    >
        <slot></slot>
        <view
            class="my_button"
            :class="isIpx ? 'iphonex-button' : ''"
            @click="sendFun"
        >
            <!-- :style="{background:btnbgColor}" -->
            <u-button
                :color="btnbgColor"
                :text="text"
                size="large"
                shape="circle"
                :loading="loading"
                :loadingText="loadingText"
            ></u-button>
            <!-- {{text}} -->
        </view>
    </view>
</template>
<script>
export default {
    name: "bottom-button",
    data() {
        return {
            isIpx: false,
        };
    },
    props: {
        text: {
            type: String,
            default: "Submit",
        },
        bgColor: {
            type: String,
            default: "transparent",
        },
        btnbgColor: {
            type: String,
            default: "#FA751F",
        },
        fixed: {
            type: Boolean,
            default: true,
        },
        loading: {
            type: Boolean,
            default: false,
        },
        loadingText: {
            type: String,
            default: "",
        },
    },
    mounted() {
        //判断设备是否为 iPhone
        const self = this;
        uni.getSystemInfo({
            success: (res) => {
                console.log(res);
                if (
                    [
                        "iPhone X",
                        "iPhone XR",
                        "iPhone XS Max",
                        "iPhone 11",
                        "iPhone 11 Pro",
                        "iPhone 11 Pro Max",
                    ].includes(res.model)
                ) {
                    this.isIpx = true;
                }
            },
        });
        console.log("说的还是", this.btnbgColor);
    },
    methods: {
        sendFun() {
            this.$emit("clickFun");
        },
    },
};
</script>
<style lang="scss">
/* components/my-tab/my-tab.wxss */
::v-deep .u-button--large {
    height: 88rpx !important;
    line-height: 88rpx !important;
    font-size: 32rpx;
}

/* 正常手机按钮 */
.bot-btn {
    padding: 30rpx 32rpx;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 99;
}

.my_button {
    text-align: center;
    color: #fff;
    letter-spacing: 2rpx;
}

/* iphone X按钮 */

.ipx_button {
    width: 100%;
    background: #fff;
    padding-bottom: 68rpx;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 888;
}

.iphonex-button {
    bottom: 68rpx !important;
}
</style>
<style scoped></style>
